<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>用户注册</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="alternate icon" type="image/png" href="amazeui/i/favicon.png">
  <link rel="stylesheet" href="amazeui/css/amazeui.css"/>
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/bootstrap.min.js"></script>
  </style>
  <script src="js/jquery-3.2.1.js"></script>
  <script src="js/md5.js"></script>
  <script>
    $(function (){
      $("#register").click(function (){
        $("#pwd").val(hex_md5($("#password").val()));
        return true;
      });
    });

    function checkUsername(){
      //获取用户值
      let username = $("#username").val();
      //定义正则
      let reg_username = /^\w{3,10}$/;
      //判断是否符合
      let flag = reg_username.test(username);
      if (flag){
        $("#username").css("border","");
        $("#misUsername").text("")
      }else {
        $("#username").css("border","1px solid red");
        $("#misUsername").text("用户名为3到10个字符").css("color","red").css("font-size","5px");
      }
      return flag;
    }
    //校验密码
    function checkPassword() {
      //1.获取密码值
      let password = $("#password").val();
      //2.定义正则
      let reg_password = /^\w{8,20}$/;

      //3.判断，给出提示信息
      let flag = reg_password.test(password);
      if(flag){
        //密码合法
        $("#password").css("border","");
        $("#misPwd").text("")
      }else{
        //密码非法,加一个红色边框
        $("#password").css("border","1px solid red");
        $("#misPwd").text("密码长度为8到20个字符").css("color","red").css("font-size","5px");
      }

      return flag;
    }
    function checkEmail(){
      //1.获取邮箱
      let email = $("#email").val();
      //2.定义正则      itcast@163.com
      let reg_email = /^\w+@\w+\.\w+$/;

      //3.判断
      let flag = reg_email.test(email);
      if(flag){
        $("#email").css("border","");
      }else{
        $("#email").css("border","1px solid red");
      }

      return flag;
    }
    $(function () {
      //当表单提交时，调用所有的校验方法
      $("#registerForm").submit(function(){
        //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
        return checkUsername() && checkPassword() && checkEmail();
      });

      //当某一个组件失去焦点是，调用对应的校验方法
      $("#username").blur(checkUsername);
      $("#password").blur(checkPassword);
      $("#email").blur(checkEmail);
    });
    $(function (){
      $(".close").click(function (){
        $(".alert").remove();
      });
    });
    $(function (){
      $("#register").click(function (){
        let pwd = $("#password").val();
        let rpwd = $("#repwd").val();
        if (pwd !== rpwd){
          $("#mis").text("密码前后不一致").css("color","red").css("font-size","5px");
          $("#repwd").css("border","1px solid red");
          return false;
        }
        return true;
      });
    });
  </script>
</head>
<body>
<div class="header">
  <div class="am-g">
    <h1>用户注册</h1>
  </div>
  <hr />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <form method="post" class="am-form" action="user/register" id="registerForm">
      <div class="login-form-div">
        <input type="text" name="username" id="username" value="" placeholder="请输入登录名" ><span id="misUsername"></span>
      </div>
      <div class="login-form-div">
        <input type="password" id="password" value="" placeholder="请输入登录密码"><span id="misPwd" ></span>
        <input type="hidden" name="password" id="pwd">
      </div>
      <div class="login-form-div">
        <input type="password" name="repwd" id="repwd" value="" placeholder="请确认密码" ><span id="mis"></span>
      </div>
      <div class="login-form-div">
        <input type="email" name="email" id="email" value="" placeholder="请输入邮箱">
      </div>
      <div class="login-form-div alert alert-warning alert-dismissible" style="width: 250px;height: 45px;" role="alert">
        <button type="button" class="close">
          <span>&times;</span>
        </button>
        <strong id="msg">${REGISTER}</strong>
      </div>
      <div class="am-cf login-form-div">
        <input type="submit" name="" id="register" value="注册" class="am-btn am-btn-primary am-btn-lg  am-btn-block am-fl">
      </div>
    </form>
    <hr>
    <p class="am-text-center">&copy; 2021 Designed by yxq   <a href="mailTo:liyan@itany.com">liyan@itany.com</a> </p>
  </div>
</div>
</body>
</html>
